<template>
  <div class="searchBar">
    <a href="javascript:void(0);"
       class="sideButton"
       @click="tolist">
      <van-icon name="arrow-left"
                size="0.5rem"
                color="#333333" />
    </a>
    <div class="inputBox">
      <div class="fromBox">
        <van-icon name="search"
                  size="0.32rem"
                  color="#9c9c9c" />
        <input type="text"
               :placeholder="msg"
               @keyup.enter="goSearch()"
               @input="guess()"
               v-model.trim="search" />
        <van-icon name="clear"
                  size="0.32rem"
                  color="#9c9c9c"
                  @click="clear()" />
      </div>
    </div>
    <a href="javascript:void(0);"
       class="sideButton"
       @click="goSearch()">搜索</a>
  </div>
</template>
<script>
import $ from "../../node_modules/jquery/dist/jquery";
export default {
  data () {
    return {
      msg: "5G手机",
      search: ""
    };
  },
  methods: {
    tolist () {
      this.$router.back();
    },
    goSearch () {
      this.$router.push("/goods");
    },
    guess () {
      if (this.search.length != 0) {
        $.ajax({
          type: "get",
          url: `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1430,21087,30494,30504&wd=${this.search}&req=2&csor=1`,
          dataType: "jsonp",
          success: function (response) {
            window.console.log(response.g);
            $("ul").remove();
            let html = response.g
              .map(ele => {
                return `<li style="height: 0.8rem;padding: 0 10px;"><a href="#/goods" style="display:block;height:100%"><span style="color:#333333;font-size: 0.28rem;height:100%;display:block;line-height:0.8rem;">${ele.q}</span></a></li>`;
              })
              .join("");
            window.console.log(html);
            $(".main").append(
              `<ul class="clear" style="position: absolute;top: 0.88rem;width:100vw;background-color: white;">${html}</ul>`
            );
          }
        });
      }
    },
    clear () {
      this.search = "";
      $("ul").remove();
    }
  }
};
</script>
<style scoped>
.main {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.searchBar {
  width: 100%;
  height: 0.88rem;
}
.sideButton {
  display: block;
  float: left;
  width: 0.88rem;
  height: 0.88rem;
  font-size: 0.28rem;
  text-align: center;
  line-height: 0.88rem;
  color: #9c9c9c;
}
.sideButton i {
  display: block;
  width: 100%;
  height: 100%;
  font: 30px;
  line-height: 0.88rem;
  text-align: center;
}
.inputBox {
  float: left;
  width: 5.74rem;
  height: 0.88rem;
}
.fromBox {
  width: 100%;
  border-radius: 0.32rem;
  height: 0.64rem;
  margin-top: 0.12rem;
  background-color: #f5f5f5;
  padding: 0 3px;
}
.fromBox input {
  float: left;
  width: 83%;
  height: 0.6rem;
  font-size: 0.24rem;
  line-height: normal;
  outline: none;
  border: none;
  background: transparent;
  box-sizing: border-box;
}
.inputBox a {
  display: block;
  margin-top: 0.2rem;
  height: 0.78rem;
  width: 100%;
  border-radius: 0.32rem;
  background-color: #f5f5f5;
}
.inputBox span {
  float: left;
  font-size: 0.28rem;
  color: #9c9c9c;
  height: 0.88rem;
  line-height: 0.88rem;
}
.inputBox i {
  font-weight: bold;
  float: left;
  height: 0.64rem;
  line-height: 0.64rem;
  text-align: center;
  margin: 0 4px;
}
input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #aab2bd;
  /* placeholder字体大小  */
  font-size: 0.24rem;
}
</style>